<template>
  <!-- 【上部表单区域】 -->
  <el-form
    :inline="true"
    :model="formData"
    class="demo-form"
    size="small"
  >
    <!-- 【第一行】 -->
    <el-row>
      <el-col :span="6">
        <el-form-item label="学科">
          <el-select
            v-model="formData.subjectName"
            placeholder="请选择"
            @focus="getSimpleSubject"
          >
            <el-option
              v-for="item in subjects"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <!-- 【二级目录无数据】 -->
        <el-form-item label="二级目录">
          <el-select
            v-model="formData.twoLevelDirectory"
            placeholder="请选择"
            @focus="getSimpleSubject(this.formData.subjectName)"
          >
            <el-option
              v-for="item in subjects"
              :key="item.id"
              :label="item.twoLevelDirectory"
              :value="item.twoLevelDirectory"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <!-- 【标签无数据】 -->
        <el-form-item label="标签">
          <el-input></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="关键字">
          <el-input
            v-model="formData.keyword"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 【第二行】 -->
    <el-row>
      <el-col :span="6">
        <el-form-item label="试题类型">
          <el-select
            v-model="formData.questionType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in questionType"
              :key="item.id"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="难度">
          <el-select
            v-model="formData.difficulty"
            placeholder="请选择"
          >
            <el-option
              v-for="item in difficulty"
              :key="item.id"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="方向">
          <el-select
            v-model="formData.direction"
            placeholder="请选择"
          >
            <el-option
              v-for="item in direction"
              :key="item.id"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="录入人">
          <el-select
            v-model="formData.creatorID"
            placeholder="请选择"
          >
            <el-option
              v-for="item in creatorID"
              :key="item.id"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 【第三行】 -->
    <el-row>
      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="企业简介">
          <el-input></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-row type="flex">
          <el-col>
            <el-form-item label="城市">
              <!-- 【所有的省和市区】 -->
              <el-select
                v-model="formData.province"
                @change="updateCity(formData.province)"
              >
                <el-option
                  v-for="(prov,index) in citySelect.province "
                  :key="index"
                  :label="prov"
                  :value="prov"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 【省市所对应的区】 -->
          <el-col>
            <el-form-item>
              <el-select v-model="formData.city">
                <el-option
                  v-for="(city,index) in citySelect.city"
                  :key="index"
                  :label="city"
                  :value="city"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="2">
        <el-row
          type="flex"
          justify="end"
        >
          <el-button
            size="small"
            @click="clearData"
          >清除</el-button>
          <el-button
            type="primary"
            size="small"
            @click="$emit('searchInfo',formData.subjectName,formData.keyword)"
          >搜索</el-button>
        </el-row>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { list } from '@/api/hmmm/subjects'
// import direction from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys.js'
// import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'

// import { simple as simpleDirectorys } from '@/api/hmmm/directorys.js'

import { choice } from '@/api/hmmm/questions.js'
export default {
  // 组件名称
  // form表单区域
  name: 'QueChoForm',
  props: {},
  // 组件状态值
  data () {
    return {
      formData: {
        // 学科
        subjectName: '',
        province: '',
        city: '',
        // 关键字
        keyword: '',
        // 二级目录
        twoLevelDirectory: ''
      },

      // cityData: datas,
      citySelect: {
        province: [],
        city: []
      },
      // 学科列表
      subjects: [],
      // 目录列表
      SimpleDirectorys: [],
      // 方向列表
      direction: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      // 录入人
      creatorID: [
        '超级管理员',
        '录入管理员'
      ],
      questionType: [
        '单选',
        '多选',
        '简答'
      ],
      difficulty: [
        '简单',
        '困难',
        '一般'
      ],
      choiceList: []
    }
  },
  created () {
    this.getCityData()
    // this.getSimpleDirectorys()
    // this.getTwoLevelDirectory(11)
  },
  methods: {
    // 获取学科列表
    async getSimpleSubject () {
      const { data } = await list()
      this.subjects = data.items
      // console.log(this.subjects)
    },
    // 省市两级联动
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    updateCity (e) {
      this.citySelect.city = citys(e)
      // 【获取到了所有的区】
      // console.log(this.citySelect.city)
    },
    // 点击按钮清除数据
    clearData () {
      this.formData = ''
      this.citySelect = ''
      this.subjects = ''
      this.direction = ''
      this.creatorID = ''
      this.questionType = ''
      this.difficulty = ''
      location.reload()
    },
    // 获取所有的精选题库的列表
    async getChoiceList () {
      const { data } = await choice(this.formData)
      this.choiceList = data.items
      // console.log(this.choiceList)
    }
  }
}
</script>

<style scoped lang="less">
</style>
